<template>

  <div>
   <div class="header wrapper">
      <!-- 导航 -->
      <div id="nav">
        <ul>
            <router-link :to="{name:'JueJingIndexzixun',query:{type:'boke'}}">
             <li><a id="zx">首页</a></li>
           </router-link>
          <li><a href="">课程</a></li>
          <li><a href="">直播</a></li>
           <router-link :to="{name:'JueJingIndexzixun',query:{type:'zixun'}}">
             <li><a id="zx">资讯</a></li>
           </router-link>
          <li><a href="">活动</a></li>
          <li><a href="">开发社区</a></li>
          <li><a href="">商城</a></li>
          <li><a href="">APP</a></li>
          <li><a href="">插件</a></li>
          <li><a href=""><img src="./images/gg1.gif"
                   alt=""
                   width="90px"
                   height="40px"></a></li>
        </ul>
      </div>
      <!-- 搜索 -->
          <!-- <div class="search">
            <input type="text"
                  class="searchTerm"
                  placeholder="探索稀土掘金">
            <button type="submit"
                    class="searchButton">
              <i class="fa fa-search"
                style="font-size:auto;color:blue;"></i> 
            </button>
          </div> -->
    </div>

    <!-- 二级导航 -->
    <div id="nave">
      <!--导航栏-->
      <div class="navwrape">
        <ul>
      
        
        
                <li v-for="p of fenlei_list" :key="p.id">
                <router-link :to="{name:'JueJingIndexzixun',query:{type:type,fenleiid:p.id}}">
                <a> {{p.name||p.flName}}</a>
               </router-link>
        </li>

        </ul>
      </div>
    </div>
    <div class="zhixun_content"   >
      <!-- 内容页面 -->
      <div class="left_content" v-show="type=='zixun'">
        <!-- 主要内容页面 -->
        <div class="main">
          <!-- 标题 -->
          <div class="title">
            <h1>{{msg.title}}</h1>
            <p><span style="color: black;">{{msg.author}}</span>&nbsp;|&nbsp; {{msg.createTime}}&nbsp; |&nbsp;&nbsp; |&nbsp;
              阅读量：{{msg.redingNum}}</p>

          </div>
          <!-- 内容栏 -->
          <div class="text"
               v-html="msg.content">

          </div>
          <!-- 评论区 -->
          <div class="comment">
            <h5>评论</h5>
            <!-- 输入框 -->
            <div class="input_ct">
              <form action="">
                <!--            <img src="./images/touxiang.svg">-->
                <textarea rows="3"
                          draggable="true"></textarea>

                <button type="submit">发送</button>
              </form>

            </div>
            <h5>全部评论 10</h5>
            <!-- 全部评论 -->
            <div class="allct">
              <div class="allct_content">
                <div class="left">
                  <img src="./images/t.jpg"
                       class="circle"></img>
                </div>
                <div class="right">
                  <div class="name">
                    <div class="left-a">
                      <h3>Sampwood</h3>
                      <span>前端开发</span>
                    </div>
                    <div class="right-a">4天前</div>
                  </div>
                  <div class="content">WebGL都没学会，原来就要淘汰了</div>
                  <div class="bottom">
                    <div class="left-c">
                      <img src="./images/dz.png"
                           alt="">
                      <span>点赞</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 子评论 -->
              <div class="allct_content_son">
                <div class="left">
                  <img src="./images/t.jpg"
                       class="circle"></img>
                </div>
                <div class="right">
                  <div class="name">
                    <div class="left-a">
                      <h3>Sampwood</h3>
                      <span>前端开发</span>
                    </div>
                    <div class="right-a">4天前</div>
                  </div>
                  <div class="content">卷起来学学</div>
                  <div class="bottom">
                    <div class="left-c">
                      <img src="./images/dz.png"
                           alt="">
                      <span>点赞</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="allct_content">
                <div class="left">
                  <img src="./images/t.jpg"
                       class="circle"></img>
                </div>
                <div class="right">
                  <div class="name">
                    <div class="left-a">
                      <h3>Sampwood</h3>
                      <span>前端开发</span>
                    </div>
                    <div class="right-a">4天前</div>
                  </div>
                  <div class="content">WebGL都没学会，原来就要淘汰了</div>
                  <div class="bottom">
                    <div class="left-c">
                      <img src="./images/dz.png"
                           alt="">
                      <span>点赞</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 子评论 -->
              <div class="allct_content_son">
                <div class="left">
                  <img src="./images/t.jpg"
                       class="circle"></img>
                </div>
                <div class="right">
                  <div class="name">
                    <div class="left-a">
                      <h3>Sampwood</h3>
                      <span>前端开发</span>
                    </div>
                    <div class="right-a">4天前</div>
                  </div>
                  <div class="content">卷起来学学</div>
                  <div class="bottom">
                    <div class="left-c">
                      <img src="./images/dz.png"
                           alt="">
                      <span>点赞</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 子评论 -->
              <div class="allct_content_son">
                <div class="left">
                  <img src="./images/t.jpg"
                       class="circle"></img>
                </div>
                <div class="right">
                  <div class="name">
                    <div class="left-a">
                      <h3>Sampwood</h3>
                      <span>前端开发</span>
                    </div>
                    <div class="right-a">4天前</div>
                  </div>
                  <div class="content">卷起来学学</div>
                  <div class="bottom">
                    <div class="left-c">
                      <img src="./images/dz.png"
                           alt="">
                      <span>点赞</span>
                    </div>
                  </div>
                </div>
              </div>

            </div>

          </div>
        </div>
        <!-- 相关资讯 -->
        <div class="info_news">
          <h3>相关资讯</h3>
          <ul>
            <li v-for="p of xg_list.records"
                :key="p.id">
              <a href="#">

                <h5>{{p.title}}</h5>
                <p>{{p.author}} {{p.createTime}} 0点赞 0评论</p>
              </a>
            </li>
          </ul>

        </div>
      </div>
          <!-- 内容页面 -->
      <div class="left_content" v-show="type=='boke'">
        <!-- 主要内容页面 -->
        <div class="main">
          <!-- 标题 -->
          <div class="title">
            <h1>{{msg.tittle}}</h1><br>
            <br>
            <p><span style="color: black;">{{msg.createBy}}</span>&nbsp;|&nbsp; {{msg.createTime}}&nbsp; |&nbsp;&nbsp; |&nbsp;
              阅读量：{{msg.readCount}}</p>
          </div>
          <!-- 内容栏 -->
          <div class="text" v-html="msg.bktext" >

          </div>
          <!-- 评论区 -->
          <div class="comment">
            <h5>评论</h5>
            <!-- 输入框 -->
            <div class="input_ct">
              <form action="">
<!--            <img src="./images/touxiang.svg">-->
                <textarea  rows="3" draggable="true"></textarea>

                <button type="submit">发送</button>
              </form>

            </div>
            <h5>全部评论 10</h5>
            <!-- 全部评论 -->
            <div class="allct">
              <div class="allct_content">
                <div class="left">
                  <img src="./images/t.jpg" class="circle"></img>
                </div>
                <div class="right">
                  <div class="name">
                    <div class="left-a">
                      <h3>Sampwood</h3>
                      <span>前端开发</span>
                    </div>
                    <div class="right-a">4天前</div>
                  </div>
                  <div class="content">WebGL都没学会，原来就要淘汰了</div>
                  <div class="bottom">
                    <div class="left-c">
                      <img src="./images/dz.png" alt="">
                      <span>点赞</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 子评论 -->
              <div class="allct_content_son">
                <div class="left">
                  <img src="./images/t.jpg" class="circle"></img>
                </div>
                <div class="right">
                  <div class="name">
                    <div class="left-a">
                      <h3>Sampwood</h3>
                      <span>前端开发</span>
                    </div>
                    <div class="right-a">4天前</div>
                  </div>
                  <div class="content">卷起来学学</div>
                  <div class="bottom">
                    <div class="left-c">
                      <img src="./images/dz.png" alt="">
                      <span>点赞</span>
                    </div>
                  </div>
                </div>
              </div>

   


            </div>

          </div>
        </div>
     
      </div>
      <div class="right_news">
        <!-- 最新资讯 -->
        <div class="new_news">
          <div class="new_news_1">
            <h2>最新资讯</h2>
            <ul>
              <li v-for="p of xg_list.records"
                  :key="p.id">
                <a href=""> {{p.title}}</a>
                <div class="div_1">
                  <span class="sp_1"><i class="fa fa-thumbs-up">点赞</i></span>
                  <span class="sp_2"><i class="fa fa-twitch">评论</i></span>
                </div>
              </li>

            </ul>
          </div>
        </div>
      </div>
    </div>
    

  </div>
</template>
<script>
import { getAction } from '@/api/manage'
import Nav from '@views/juejingindex/modules/Nav'
import Nave from '@views/juejingindex/modules/Nave'

export default {
  data() {
    return {
      msg: '',
      xg_list: '',
      id: '',
      type:"",
      fenlei_list:'',
      url:'',
      fenlei_url:'',
    }
  },
  methods: {
    // 获取新闻列表
    get_new_list(type, params = {}) {
      this.type = type
      console.log(params);
      switch (type) {
        case 'boke':
          this.url = '/bkWenzhang/bkWenzhang/queryById'
          this.fenlei_url = '/bkFenlei/bkFenlei/list'
          break
        case 'zixun':
          this.fenlei_url ='/juejingzixuntype/juejingZixunType/rootList'
          this.url = '/juejingzixun/juejingZixunList/queryById'
          break
        default:
          break
      }

      // 请求获取新闻内容
      getAction(this.url, params).then((res) => {
        console.log(res);
        if (this.type == "boke") {
          this.msg = res.result
             console.log(res.result.records[0]);
           
        }else{
              this.msg = res.result;
        }
      })

      // 请求获取分类列表
      getAction(this.fenlei_url).then((res) => {
 
        if (res.success) {
          this.fenlei_list = res.result.records
          console.log(this.fenlei_list)
        }
      })
    },
    //获取相关新闻
    xianguan_zixun() {
      var url = '/juejingzixun/juejingZixunList/list'
      getAction(url).then((res) => {
        if (res.success) {
          this.xg_list = res.result
        }
      })
    },
    // 获取url参数id
    loadDate() {
      this.id =this.$route.query.id;
        this.type =this.$route.query.type;
      this.get_new_list(this.type ,{'id':this.id});
    },
  },
  created() {
    this.loadDate()
    this.xianguan_zixun()
  },
}
</script>
<style >
@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css';
@import "./css/index.css";
@import "./css/index copy.css";
@import "./css/nav.css";
@import "./css/base.css";
</style>